<template>
  <div class="function-btn-box flex-row-start">
<!--    <i class="function-btn-box el-icon-view" @click=""></i>-->
    <i class="function-btn-icon  el-icon-star-on" @click="handleClickLick" v-show="like" style="color: tomato"></i>
    <i class="function-btn-icon  el-icon-star-off" @click="handleClickLick" v-show="!like"></i>
    <i class="function-btn-icon el-icon-share" @click="handleClickShare"></i>
  </div>
</template>

<script>
export default {
  name: "FunctionButtonBox",

  data(){
    return{
      like:false
    }
  },
  methods:{
    handleClickLick(){
      this.like=!this.like
      this.$emit("like")
    },
    handleClickShare(){
      this.$emit("share")
    }
  }
}
</script>

<style scoped lang="less">
  .function-btn-box{
    padding: 5px 10px;
    border-radius: 5px;
    .function-btn-icon{
      margin-right: 5px;
      cursor: pointer;
      transition: all 0.3s;
      caret-color: transparent;
      &:hover{
        color: #02a5da;
      }
    }
  }
</style>